@import "./common.scss";

@mixin bg {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#app {
    width: 100%;
    max-width: 750px;
    margin: auto;
    @extend .clearfix;
    @include bg;
    background-size: 80% auto;
    background-image: url(//sdk-web.eyougame.com/static/img/pic.jpg?1576563718214);
    .widget.google {
        width: 32%;
        padding-top: 14.6%;
        margin: 33% auto auto;
        @include bg;
        background-image: url(//sdk-web.eyougame.com/static/img/google.gif?1576563718214);
    }
    .toolbar {
        width: 90%;
        margin: 32px auto auto;
        text-align: center;
        font-size: 0;
        .weather-box {
            display: inline-block;
        }
        .btn {
            display: inline-block;
            width: 56px;
            height: 56px;
            line-height: 56px;
            padding: 0;
            margin: auto 12px;
            vertical-align: top;
            border-width: 0;
            border-radius: 100%;
            font-size: 12px;
            color: #fff;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 40px auto;
            transition: border-radius 3s;
            cursor: pointer;
            &.btn-weather {
                padding-top: 12px;
                line-height: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                background-color: #23aaf2 ;
                background-image: url(//sdk-web.eyougame.com/static/img/ic-sun.png?1576563718214);
                box-shadow: 0 0 6px #23aaf2 ;
                .celsius {
                    display: block;
                }
            }
            &.btn-qrcode {
                background-color: #ff6da0;
                background-image: url(//sdk-web.eyougame.com/static/img/ic-qrcode.png?1576563718214);
                box-shadow: 0 0 6px #ff6da0;
            }
            &.btn-apk {
                background-color: #ffb558;
                background-image: url(//sdk-web.eyougame.com/static/img/ic-apk.png?1576563718214);
                box-shadow: 0 0 6px #ff9d1e;
            }
            &.btn-music {
                background-color: #02e276;
                background-image: url(//sdk-web.eyougame.com/static/img/ic-music.png?1578477228574);
                box-shadow: 0 0 6px #00b55e;
            }
        }
    }
}